<template>
  <div id="home-page" style="animation: fadeIn 0.5s ease-in-out;">
    <!-- 轮播图 -->
    <div style="position: relative; overflow: hidden;">
      <!-- 使用 :style 绑定轮播位移 -->
      <div
          style="display: flex; transition: transform 0.5s ease-in-out;"
          :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
      >
        <div style="min-width: 100%;">
          <img src="https://picsum.photos/id/1067/800/300" alt="促销活动" style="width: 100%; height: 12rem; object-fit: cover;">
        </div>
        <div style="min-width: 100%;">
          <img src="https://picsum.photos/id/1048/800/300" alt="新品上市" style="width: 100%; height: 12rem; object-fit: cover;">
        </div>
        <div style="min-width: 100%;">
          <img src="https://picsum.photos/id/1060/800/300" alt="限时折扣" style="width: 100%; height: 12rem; object-fit: cover;">
        </div>
      </div>

      <!-- 动态生成指示器并绑定点击事件 -->
      <div style="position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem;">
        <button
            v-for="(item, index) in 3"
            :key="index"
            :style="{
              opacity: currentSlide === index ? '1' : '0.5'
            }"
            style="width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: white; transition: opacity 0.3s;"
            @click="goToSlide(index)"
        ></button>
      </div>
    </div>

    <!-- 分类导航 -->
    <div style="background-color: white; padding: 1rem;">
      <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;">
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: rgba(59, 130, 246, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-bath" style="color: #3b82f6; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">卫浴洁具</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #dcfce7; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-tree" style="color: #16a34a; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">地板门窗</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #e9d5ff; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-lightbulb" style="color: #9333ea; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">灯具照明</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #fef3c7; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-couch" style="color: #d97706; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">家具软装</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #bfdbfe; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-paint-roller" style="color: #3b82f6; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">油漆涂料</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #fee2e2; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-trowel" style="color: #ef4444; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">瓷砖石材</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #c7d2fe; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-plug" style="color: #4f46e5; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">电工电料</span>
        </a>
        <a  style="display: flex; flex-direction: column; align-items: center;">
          <div style="width: 3rem; height: 3rem; border-radius: 9999px; background-color: #fbcfe8; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
            <i class="fa-solid fa-pencil-ruler" style="color: #db2777; font-size: 1.25rem;"></i>
          </div>
          <span style="font-size: 0.875rem; line-height: 1.25rem;">设计服务</span>
        </a>
      </div>
    </div>

    <!-- 今日推荐 -->
    <div style="padding-left: 1rem; padding-right: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h2 style="font-size: 1.125rem; font-weight: bold;">今日推荐</h2>
        <a  style="color: #3b82f6; font-size: 0.875rem;">查看更多</a>
      </div>
      <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;">
        <div style="background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <img src="https://picsum.photos/id/1060/400/300" alt="瓷砖" style="width: 100%; height: 10rem; object-fit: cover;">
          <div style="padding: 0.75rem;">
            <h3 style="font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">现代简约防滑瓷砖</h3>
            <div style="display: flex; align-items: center; margin-top: 0.25rem;">
              <div style="color: #facc15; font-size: 0.75rem; display: flex;">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
              <span style="font-size: 0.75rem; color: #6b7280; margin-left: 0.25rem;">(128)</span>
            </div>
            <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between;">
              <span style="color: #3b82f6; font-weight: bold;">¥128</span>
              <span style="font-size: 0.875rem; color: #9ca3af; text-decoration: line-through;">¥168</span>
            </div>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <img src="https://picsum.photos/id/1067/400/300" alt="卫浴" style="width: 100%; height: 10rem; object-fit: cover;">
          <div style="padding: 0.75rem;">
            <h3 style="font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">智能马桶一体机</h3>
            <div style="display: flex; align-items: center; margin-top: 0.25rem;">
              <div style="color: #facc15; font-size: 0.75rem; display: flex;">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
              </div>
              <span style="font-size: 0.75rem; color: #6b7280; margin-left: 0.25rem;">(86)</span>
            </div>
            <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between;">
              <span style="color: #3b82f6; font-weight: bold;">¥2899</span>
              <span style="font-size: 0.875rem; color: #9ca3af; text-decoration: line-through;">¥3299</span>
            </div>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <img src="https://picsum.photos/id/1048/400/300" alt="地板" style="width: 100%; height: 10rem; object-fit: cover;">
          <div style="padding: 0.75rem;">
            <h3 style="font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">强化复合木地板</h3>
            <div style="display: flex; align-items: center; margin-top: 0.25rem;">
              <div style="color: #facc15; font-size: 0.75rem; display: flex;">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-regular fa-star"></i>
              </div>
              <span style="font-size: 0.75rem; color: #6b7280; margin-left: 0.25rem;">(64)</span>
            </div>
            <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between;">
              <span style="color: #3b82f6; font-weight: bold;">¥98</span>
              <span style="font-size: 0.875rem; color: #9ca3af; text-decoration: line-through;">¥128</span>
            </div>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <img src="https://picsum.photos/id/1062/400/300" alt="灯具" style="width: 100%; height: 10rem; object-fit: cover;">
          <div style="padding: 0.75rem;">
            <h3 style="font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">北欧风格吸顶灯</h3>
            <div style="display: flex; align-items: center; margin-top: 0.25rem;">
              <div style="color: #facc15; font-size: 0.75rem; display: flex;">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
              <span style="font-size: 0.75rem; color: #6b7280; margin-left: 0.25rem;">(92)</span>
            </div>
            <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between;">
              <span style="color: #3b82f6; font-weight: bold;">¥369</span>
              <span style="font-size: 0.875rem; color: #9ca3af; text-decoration: line-through;">¥429</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务专区 -->
    <div style="padding:1.5rem 1rem; background:#fff;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
        <h2 style="font-size:1.125rem;font-weight:bold;">服务专区</h2>
        <a  style="color:#3b82f6;font-size:0.875rem;">查看更多</a>
      </div>
      <div style="display:flex;flex-direction:column;gap:0.75rem;">
        <div style="display:flex;background:#f3f4f6;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
          <img src="https://picsum.photos/id/1058/200/200" alt="设计服务" style="width:6rem;height:6rem;object-fit:cover;">
          <div style="padding:0.75rem;flex:1;">
            <h3 style="font-weight:500;">专业室内设计</h3>
            <p style="font-size:0.875rem;color:#6b7280;margin-top:0.25rem;">3D效果图/全屋定制/免费量房</p>
            <div style="margin-top:0.5rem;display:flex;justify-content:space-between;align-items:center;">
              <span style="color:#3b82f6;font-weight:bold;">¥299起</span>
              <button style="font-size:0.75rem;background:#3b82f6;color:#fff;border-radius:0.375rem;margin-right: 10px;margin-left: 10px">立即预约</button>
            </div>
          </div>
        </div>
        <div style="display:flex;background:#f3f4f6;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
          <img src="https://picsum.photos/id/1059/200/200" alt="安装服务" style="width:6rem;height:6rem;object-fit:cover;">
          <div style="padding:0.75rem;flex:1;">
            <h3 style="font-weight:500;">家具安装服务</h3>
            <p style="font-size:0.875rem;color:#6b7280;margin-top:0.25rem;">专业师傅/上门安装/售后保障</p>
            <div style="margin-top:0.5rem;display:flex;justify-content:space-between;align-items:center;">
              <span style="color:#3b82f6;font-weight:bold;">¥50起</span>
              <button style="font-size:0.75rem;background:#3b82f6;color:#fff;border-radius:0.375rem;margin-right: 10px;margin-left: 10px">立即预约</button>
            </div>
          </div>
        </div>
        <div style="display:flex;background:#f3f4f6;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
          <img src="https://picsum.photos/id/1061/200/200" alt="送货服务" style="width:6rem;height:6rem;object-fit:cover;">
          <div style="padding:0.75rem;flex:1;">
            <h3 style="font-weight:500;">大件家具配送</h3>
            <p style="font-size:0.875rem;color:#6b7280;margin-top:0.25rem;">同城配送/专业搬运/破损包赔</p>
            <div style="margin-top:0.5rem;display:flex;justify-content:space-between;align-items:center;">
              <span style="color:#3b82f6;font-weight:bold;">¥30起</span>
              <button style="font-size:0.75rem;background:#3b82f6;color:#fff;border-radius:0.375rem;margin-right: 10px;margin-left: 10px">立即预约</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门活动 -->
    <div style="padding-left: 1rem; padding-right: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h2 style="font-size: 1.125rem; font-weight: bold;">热门活动</h2>
        <a  style="color: #3b82f6; font-size: 0.875rem;">查看更多</a>
      </div>
      <div style="display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem;">
        <div style="background-image: linear-gradient(to right, #3b82f6, #4f46e5); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <div style="padding: 1rem;">
            <h3 style="color: white; font-weight: bold;">618大促</h3>
            <p style="color: #bfdbfe; font-size: 0.875rem; margin-top: 0.25rem;">全场低至5折起</p>
            <div style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
              <div style="background-color: white; color: #3b82f6; border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500;">05</div>
              <span style="color: white; font-size: 0.75rem;">:</span>
              <div style="background-color: white; color: #3b82f6; border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500;">42</div>
              <span style="color: white; font-size: 0.75rem;">:</span>
              <div style="background-color: white; color: #3b82f6; border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500;">18</div>
            </div>
            <button class="mt-4 bg-white text-blue-600 text-sm px-3 py-1 rounded-lg" style=" margin-top: 1rem;    --tw-bg-opacity: 1;     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1;     color: rgb(37 99 235 / var(--tw-text-opacity, 1));    font-size: 0.875rem/* 14px */;     line-height: 1.25rem/* 20px */; padding-left: 0.75rem/* 12px */;     padding-right: 0.75rem/* 12px */; padding-top: 0.25rem/* 4px */; border-radius: 0.5rem/* 8px */;width: 100px;    padding-bottom: 0.25rem/* 4px */;margin-left: 10px">立即抢购</button>

          </div>
        </div>
        <div style="background-image: linear-gradient(to right, #f97316, #dc2626); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
          <div style="padding: 1rem;">
            <h3 style="color: white; font-weight: bold;">设计师推荐</h3>
            <p style="color: #fed7aa; font-size: 0.875rem; margin-top: 0.25rem;">精选搭配套餐</p>
            <img src="https://picsum.photos/id/1068/100/100" alt="设计师推荐" style="margin-top: 0.5rem; border-radius: 0.5rem; width: 5rem; height: 5rem; object-fit: cover;">
            <button class="mt-4 bg-white text-blue-600 text-sm px-3 py-1 rounded-lg" style=" margin-top: 1rem;    --tw-bg-opacity: 1;     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1;     color: rgb(37 99 235 / var(--tw-text-opacity, 1));    font-size: 0.875rem/* 14px */;     line-height: 1.25rem/* 20px */; padding-left: 0.75rem/* 12px */;     padding-right: 0.75rem/* 12px */; padding-top: 0.25rem/* 4px */; border-radius: 0.5rem/* 8px */;width: 100px;    padding-bottom: 0.25rem/* 4px */;margin-left: 10px">查看详情</button>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 轮播图状态
const currentSlide = ref(0);
let slideInterval: ReturnType<typeof setInterval> | null = null;

// 轮播图自动切换
const nextSlide = () => {
  const slideCount = 3; // 轮播图数量固定为3
  currentSlide.value = (currentSlide.value + 1) % slideCount;
};

// 跳转到指定轮播图
const goToSlide = (index: number) => {
  // 清除当前定时器
  if (slideInterval) {
    clearInterval(slideInterval);
  }

  // 更新当前轮播图
  currentSlide.value = index;

  // 重新启动定时器
  slideInterval = setInterval(nextSlide, 3000);
};

onMounted(() => {
  // 组件挂载后启动自动轮播
  slideInterval = setInterval(nextSlide, 3000);
});

onUnmounted(() => {
  // 组件卸载时清除定时器，防止内存泄漏
  if (slideInterval) {
    clearInterval(slideInterval);
  }
});
</script>

<style>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .tab-active {
    @apply text-primary border-b-2 border-primary;
  }
  .nav-active {
    @apply text-primary;
  }
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
  }
  .btn-secondary {
    @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/5;
  }
  .btn-danger {
    @apply bg-red-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-red-600 hover:shadow-lg transform hover:-translate-y-0.5;
  }
  .card-hover {
    @apply transition-all duration-300 hover:shadow-card hover:-translate-y-1;
  }
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  .animate-slide-up {
    animation: slideUp 0.4s ease-out;
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}
@import "index.css";
</style>